﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/jsp/common/taglibs.jsp" %>
<html>
<body class="no-skin">
    <!-- 以下为内容 -->
    <!--输入区域-->
    <div class="widget-box transparent">
        <div class="widget-header widget-header-small">
            <h4 class="widget-title blue smaller">
                <i class="ace-icon glyphicon glyphicon-file orange"></i>
                人员信息维护
            </h4>
        </div>
        <div class="widget-body">
            <div class="widget-main padding-8">
                <!-- #section:pages/profile.feed -->
                <div id="profile-feed-1" class="profile-feed">
                    <form id="userAddForm" class="form-horizontal" role="form">
                        <input type="hidden" name="addUserToken" value="${addUserToken}" />
                        <input type="hidden" name="module" value="addUser" />
                        <div class="space-1">
                            <input name="orgCode" type="hidden" id="orgCode" class="col-xs-6" value="${orgCode}"/>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">所属部门</label>
                            <div class="col-sm-9">
                                <select name="deptCode" id="deptCode" class="col-xs-6">
                                    <c:forEach var="dept" items="${deptList}">
                                        <option value="${dept.deptCode}">${dept.deptName}[${dept.deptCode}]</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">员工姓名</label>
                            <div class="col-sm-9">
                                <input name="userName" type="text" id="userName" maxlength="100" class="col-xs-6"/>
                            </div>
                        </div>

                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">登录名</label>
                            <div class="col-sm-9">
                                <input type="text" id="loginId" name="loginId" maxlength="50" class="col-xs-6"/>
                            </div>
                        </div>

                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">工号</label>
                            <div class="col-sm-9">
                                <input type="text" id="agentNo" name="agentNo" maxlength="50" class="col-xs-6"/>
                            </div>
                        </div>

                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">联系电话</label>
                            <div class="col-sm-9">
                                <input name="mobilephone" type="text" id="mobilephone" maxlength="20" class="col-xs-6"/>
                            </div>
                        </div>
                        <!--
                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">微信号</label>
                            <div class="col-sm-9">
                                <input name="weixin" type="text" id="weixin" maxlength="50" class="col-xs-6"/>
                            </div>
                        </div>
                        -->
                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">邮箱</label>
                            <div class="col-sm-9">
                                <input name="email" type="text" id="email" maxlength="50" class="col-xs-6"/>
                            </div>
                        </div>

                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">岗位</label>
                            <div class="col-sm-9">
                                <input type="text" id="positionName" name="positionName" class="col-xs-6" readonly
                                       onclick="showTree(); return false;"/>
                                <input type="hidden" id="positionCode" name="positionCode" class="col-xs-6"/>
                            </div>
                        </div>
                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1">系统</label>
                            <div class="col-sm-9" class="form-control">
                                <c:forEach items="${appList}" var="app" varStatus="idx">
                                    <c:if test="${idx.count%5==0}">
                                        <br>
                                    </c:if>
                                    <input type="checkbox" name="clientCode" value="${app.dictName}">${app.dictName} &nbsp;&nbsp;
                                </c:forEach>
                            </div>
                        </div>

                        <div class="space-1"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 状态 </label>
                            <div class="col-sm-9">
                                <input type="radio" name="statusRadio" value="1" checked="checked"/>启用 &nbsp;&nbsp;
                                <input type="radio" name="statusRadio" value="0"/>禁用
                                <input type="hidden" id="status" name="status"/>
                            </div>
                        </div>

                    </form>
                </div>
            </div>

            <div class="col-xs-12" style="text-align:center"><!-- 按钮行-->
                <div class="clearfix form-actions" style="">
                    <button class="btn btn-info" type="button" id="subBtn" onclick="submitUserAddForm();">
                        <i class="ace-icon fa fa-save bigger-110"></i>
                        保 存
                    </button>
                    <button class="btn" type="button" id="canBtn" onclick="toBack();">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        返 回
                    </button>
                </div>
            </div>

            <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
                <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="${resRoot}/plugin/zTree_v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${resRoot}/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="${resRoot}/plugin/ace-v1.3/assets/js/jquery.validate.min.js"></script>
    <script src="${resRoot}/plugin/jquery-validation/localization/messages_zh.js"></script>
    <script type="text/javascript">

        //返回
        function toBack() {
            var orgCode = $("#orgCode").val();
            window.location.href = "../../auth/user/toUserList.htm?orgCode=" + orgCode;
        }

        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "positionCode",
                    pIdKey: "parentCode",
                    rootPId: null
                },
                key: {
                    name: "positionName"
                }
            },
            view: {
                selectedMulti: false
            },
            callback: {
                onClick: onClick
            }
        };

        //点击
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    nodes = zTree.getSelectedNodes(),
                    v = "";
            val = "";
            nodes.sort(function compare(a, b) {
                return a.id - b.id;
            });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v = nodes[i].positionName;
                val = nodes[i].positionCode;
            }

            $("#positionName").val(v);
            $("#positionCode").val(val);

        }


        //显示下拉树
        function showTree() {
            var posObj = $("#positionName");
            var posOffset = $("#positionName").offset();
            $("#menuContent").css({
                left: posOffset.left + "px",
                top: posOffset.top + posObj.outerHeight() + "px"
            }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }

        //隐藏下拉树
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }


        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }
    
        function selectDefault(){
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = treeObj.getNodes();
            if(nodes.length > 0) {
                $("#positionName").val(nodes[0].positionName);
                $("#positionCode").val(nodes[0].positionCode);
            }
        }

        //得到岗位树
        $(document).ready(function () {
            var orgCode = $("#orgCode").val();
            $.ajax({
                type: "POST",
                contentType: 'application/json',
                dataType: "json",
                url: contextPath + "/auth/position/getPositionByOrg.json?orgCode=" + orgCode,
                success: function (data) {
                    $.fn.zTree.init($("#treeDemo"), setting, data);
                    selectDefault();
                },
                error: function () {
                    $.Alert("系统错误！");
                }
            });
        });


        //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
        function forbidBackSpace(e) {
            var ev = e || window.event; //获取event对象   
            var obj = ev.target || ev.srcElement; //获取事件源   
            var t = obj.type || obj.getAttribute('type'); //获取事件源类型   
            //获取作为判断条件的事件类型   
            var vReadOnly = obj.readOnly;
            var vDisabled = obj.disabled;
            //处理undefined值情况   
            vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;
            vDisabled = (vDisabled == undefined) ? true : vDisabled;
            //当敲Backspace键时，事件源类型为密码或单行、多行文本的，   
            //并且readOnly属性为true或disabled属性为true的，则退格键失效   
            var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true);
            //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效   
            var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";
            //判断   
            if (flag2 || flag1) return false;
        }
        //禁止后退键 作用于Firefox、Opera  
        document.onkeypress = forbidBackSpace;
        //禁止后退键  作用于IE、Chrome  
        document.onkeydown = forbidBackSpace;

        //提交表单函数
        function submitUserAddForm() {
            //设置状态值
            var statusVal = $("input[name='statusRadio']:checked").val();
            $("#status").val(statusVal);
            if (validateForm()) {
                //禁用按钮
                $("#subBtn").attr("disabled", true);
                $("#canBtn").attr("disabled", true);
                $.ajax({
                    url: contextPath + "/auth/user/saveUser.json",
                    type: "post",
                    data: $("#userAddForm").serialize(),
                    success: function (data) {
                        var msg = eval("(" + data + ")");
                        $.Alert(msg.message, '', toUserList);
                    },
                    error: function () {
                        //$.Alert("服务异常，请稍后尝试！");
                        $("#subBtn").removeAttr("disabled");
                        $("#canBtn").removeAttr("disabled");
                    }
                });
            }
        }

        function toUserList() {
            var orgCode = $("#orgCode").val();
            location.href = "../../auth/user/toUserList.htm?orgCode=" + orgCode;
        }

        //客户简称验证
        //jQuery.validator.addMethod("dealerShtNameCheck",function(value,element){
        //  var reg = /^[0-9a-zA-Z]+$/;
        // return this.optional(element) || reg.test(value);
        //},"客户简称只能为字母或数字");

        //表单验证函数
        function validateForm() {
            return $("#userAddForm").validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                rules: {
                    "loginId": {
                        required: true,
                        remote: {
                            url: contextPath + '/auth/user/validLoginId.json',
                            type: "post",
                            async: false,
                            data: {
                                loginId: function () {
                                    return $("#loginId").val()
                                }
                            }
                        }
                    },
                    "userName": {
                        required: true
                    },
                    /*"mobilephone": {
                        digits: true
                    },
                    "weixin": {
                        required: true
                    },
                    "email": {
                        required: true,
                        email: true
                    },*/
                    "positionName": {
                        required: true
                    }
                },
                messages: {
                    "loginId": {
                        remote: "该用户名已存在，请重新添加"
                    }
                },

                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                },

                success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                    $(e).remove();
                },


                errorPlacement: function (error, element) {
                    if (element.is(':checkbox') || element.is(':radio')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    }
                    else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else if (element.is('textarea')) {
                        error.appendTo(element.parent());
                    }
                    else if (element.is('input[type=text]')) {
                        error.appendTo(element.parent());
                    }
                    else error.insertAfter(element.parent());
                }
            }).form();
        }

    </script>
</body>
</html>
